<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <el-input v-model="taskName" clearable @clear="init" placeholder="输入任务名称搜索" maxlength="10" style="width: 200px;"
                class="filter-item" @keyup.enter.native="init"/>
      <el-select v-model="unitName" class="filter-item" clearable @clear="init" style="width: 200px;" placeholder="分队名称">
        <el-option v-for="item in unitList" :key="item.value" :label="item.label" :value="item.label">
        </el-option>
      </el-select>
      <el-select v-model="sceneName" class="filter-item" clearable @clear="init" style="width: 200px;" placeholder="地图类型">
        <el-option v-for="item in senceList" :key="item.value" :label="item.label" :value="item.label">
        </el-option>
      </el-select>
      <el-input v-model="userName" clearable @clear="init" placeholder="输入姓名搜索" maxlength="10" style="width: 200px;"
                class="filter-item" @keyup.enter.native="init"/>
      <el-date-picker style="width: 400px;height: 31px;" class="filter-item" size="small"
      		v-model="timeValue"
           @change="handleDateChange"
      		type="daterange"
      		value-format="yyyy-MM-dd"
      		range-separator="至"
      		start-placeholder="训练开始日期"
      		end-placeholder="训练结束日期">
      </el-date-picker>
      <el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="init">搜索</el-button>
    </div>
    <el-table v-loading="loading" :data="data" size="small" style="width: 100%;" border>
      <el-table-column
        type="index"
        label="序号"
        align="center"
        width="60">
      </el-table-column>
      <el-table-column prop="user_name" label="姓名" width="100" align="center"/>
      <el-table-column prop="task_name" label="任务名称" width="200"align="center"/>
      <el-table-column prop="unit_name" label="训练分队" width="200"align="center"/>
      <el-table-column prop="map_name" label="地图类型" width="200" align="center"/>
      <!-- <el-table-column prop="chapterName" label="联系电话" width="200" align="center"/> -->
      <el-table-column prop="train_position" label="训练岗位" width="200" align="center"/>
      <el-table-column prop="achievement" label="取得成就名称"  align="center">
        <template slot-scope="scope">
        <!--  <span>{{ debugData(scope.row.achievement) }}</span> -->
          <div>
            <el-tag style="margin-left: 5px;"
              v-for="(tag,index) in debugData(scope.row.achievement)"
              :key="tag.index"
              type="danger">
              {{tag.name}}
            </el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="total_experience_value" label="累计经验值" width="200" align="center"/>
      <el-table-column prop="experience_value" label="本次训练经验值" width="200" align="center"/>
      <el-table-column prop="create_time" label="训练时间" width="200" align="center">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.create_time) }}</span>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      :total="total"
      :current-page="page + 1"
      style="margin-top: 8px;"
      layout="total, prev, pager, next, sizes"
      @size-change="sizeChange"
      @current-change="pageChange"/>
  </div>
</template>

<script>
  import initData from '@/mixins/initData'
  import { parseTime } from '@/utils/index'
  export default {
    mixins: [initData],
    data() {
      return {
        loading: false,
        delLoading: false,
        userName: '',
        unitName: '',
        sceneName: '',
        taskName:'',
        timeValue:[],
        unitList:[
          {value:0,label:"饮食保障分队"},
          {value:1,label:"勤务保障分队"},
          {value:2,label:"弹药保障分队"},
          {value:3,label:"卫生保障分队"},
        ],
        senceList:[
          {value:0,label:"山地"},
          {value:1,label:"丘陵"},
          {value:2,label:"丛林"},
          {value:3,label:"高原"},
        ]
      }
    },
    created() {
      this.$nextTick(() => {
        this.init()
      })
    },
    methods: {
      parseTime,
      beforeInit() {
        this.url = 'train/report'
        this.params = {
          page: this.page,
          size: this.size,
          taskName:this.taskName,
          userName: this.userName,
          unitName: this.unitName,
          sceneName: this.sceneName
        }
        if(this.timeValue!=null && this.timeValue.length>=2){
        	this.params.startTime=this.timeValue[0]+" 00:00:00";
        	this.params.endTime=this.timeValue[1]+" 23:59:59";
        }
        return true
      },
      handleDateChange(val) {
        if (!val) {
          this.timeValue = null;
          this.page=0
          this.init()
        }
      },
      debugData(data){
       var result= JSON.parse(data);
        return result;
      }
    }
  }
</script>
